<template>
  <div class="main device-right-container">
    <header class="header-container">
      <div class="title"><span>监控设备列表</span></div>
    </header>
    <div class="chart-box">
      <grid-layout
        :layout="layout"
        :col-num="24"
        :row-height="rowHeight"
        :is-draggable="false"
        :is-resizable="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
        v-if="show"
        :event-bus='eventBus'>
        <grid-item
          v-for="item in layout"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          @resize="onResize"
          :event-bus='eventBus'>

          <component
          :is="item.component"
          :data="item.data"
           ></component>
        </grid-item>
      </grid-layout>
    </div>
  </div>
</template>

<script>
import { GridLayout, GridItem } from 'components/view/layout/vue-grid-layout'
import data from '../data/rightData'
import State from './State'
import Vue from 'vue'

let layout = []
let count = data.length
for (let i = 0; i < count; i++) {
  let index = i + 1
  let item = {x: (i % 3) * 8, y: (Math.ceil(index / 4) - 1) * 4, w: 8, h: 4, i: index + '', component: 'State'}
  item.data = data[i]
  layout.push(item)
}

export default {
  name: 'DeviceRight',

  components: {
    GridLayout,
    GridItem,
    State
  },

  data () {
    return {
      layout: layout,
      rowHeight: 100,
      show: false,
      selectedFilter: 0,
      eventBus: new Vue(),
      filter: {
        opations1: ['路灯电表', '景观照明', '大堂照明', '楼梯照明', '停车场电表', '监控中心电表'],
        opations2: ['会所', '商业', '别墅', '1栋', '2栋', '3栋', '4栋', '5栋', '6栋', '7栋'],
        opations3: ['正常', '异常', '告警']
      }
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.rowHeight = 70
      // let containerHeight = this.$el.clientHeight - 50
      // this.rowHeight = (containerHeight - 130) / 12
      this.show = true
    })
  },

  methods: {
    onResize () {
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/base'

.device-right-container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 12px;

  .title {
    margin-left 10px
    height 50px
    line-height 50px
    font-size 14px
  }

  .chart-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 50px;
    box-sizing: border-box;
    overflow: auto;
  }

  .triangle {
    triangle(#fff, 10px);
    margin-left: 5px;
  }
}
</style>
